/*
    用户注册的路由组件
*/
import React from 'react'
import { NavBar, WingBlank, List, InputItem, WhiteSpace, Radio, Button } from 'antd-mobile'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import Logo from '../../components/logo/logo'

class Register extends React.Component {
	state = {
		username: '',
		password: '',
		passwors2: '',
		type: 'dashen',
	}
	//处理输入框/单选框的变化，收集数据到state
	handleChange = (name, value) => {
		this.setState({ [name]: value })
	}
	//跳转到login路由
	toLogin = () => {
		this.props.history.replace('/login')
	}
	//注册
	register = () =>{
		console.log('点击登陆')
	}
	render() {
		const { type } = this.state
		const { redirectTo, msg } = this.props
		if (redirectTo) {
			return <Redirect to={redirectTo} />
		}
		return (
			<div>
				<NavBar>测试项目</NavBar>
				<Logo />
				<WingBlank>
					{msg ? <p className="error-msg">{msg}</p> : null}
					<List>
						<InputItem placeholder="输入用户名" onChange={val => this.handleChange('username', val)}>
							用户名：
						</InputItem>
						<WhiteSpace></WhiteSpace>
						<InputItem placeholder="输入密码" type="password" onChange={val => this.handleChange('password', val)}>
							密&nbsp;&nbsp;&nbsp;码：
						</InputItem>
						<WhiteSpace></WhiteSpace>
						<InputItem placeholder="输入确认密码" type="password" onChange={val => this.handleChange('password2', val)}>
							确认密码
						</InputItem>
						<WhiteSpace></WhiteSpace>
						<List.Item>
							<span style={{ marginRight: 30 }}>用户类型</span>
							<Radio
								checked={type === 'dashen'}
								onClick={() => {
									this.handleChange('type', 'dashen')
								}}
							>
								大神
							</Radio>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<Radio
								checked={type === 'laoban'}
								onClick={() => {
									this.handleChange('type', 'laoban')
								}}
							>
								老板
							</Radio>
						</List.Item>
						<WhiteSpace></WhiteSpace>
						<Button type="primary" onClick={this.register}>
							注&nbsp;&nbsp;&nbsp;册
						</Button>
						<WhiteSpace></WhiteSpace>
						<Button onClick={this.toLogin}>已经有账号</Button>
					</List>
				</WingBlank>
			</div>
		)
	}
}
export default connect(state => state.user)(Register)
